import React from "react";
import {withRouter} from 'react-router-dom'
import GoBackLayout from "../../../layouts/GoBackLayout/GoBackLayout";
import LocalStorageService from "../../../utils/LocalStorageService";
import {searchParams} from "../../mall/mall";
import {getEuroPlanRankReq} from "../../../apis/goApis";
import {log} from "../../../utils/commonfunc";
import noDataSrc from '../../../res/images/web/euro/wushuju@2x.png'
import userSrc from '../../../res/images/web/euro/user pic@2x.png'

class EuroPlanRank extends React.Component {
    constructor(props) {
        super(props)
        this.searchParams = searchParams()
        this.uid = this.searchParams.webview === 'true' ? this.searchParams.uid : LocalStorageService.get('userid')
        this.state = {
            rank: [],
            my: null,
        }
    }

    componentDidMount() {
        this.getData()
    }

    getData = () => {
        getEuroPlanRankReq({
            Uid: this.uid,
        })
            .then(res => {
                const data = res.data
                // const rank = data.all.findIndex(v => v.Uid === data.me.Uid)
                this.setState({
                    rank: data.all,
                    my: data.me,
                })
            })
    }

    render() {
        const rank = this.state.rank
        const my = this.state.my
        return (
            <>
                <GoBackLayout
                    history={this.props.history}
                    mainTitle='支持排行榜'
                >
                    {rank.length > 0 && <div className='euro-plan-rank-container'>
                        <div className='euro-plan-rank-header'>
                            <span>排名</span>
                            <span>支持奖励</span>
                        </div>
                        <div className='euro-plan-rank-content'>
                            {rank.map((r, index) => {
                                log(r)
                                let color = '#AFAFAF'
                                const colors = [
                                    '#CA3A39',
                                    '#FFA500',
                                    '#FFC863',
                                ]
                                if (colors[index]) {
                                    color = colors[index]
                                }
                                return <div
                                    key={index}
                                    className='euro-plan-rank-item flex-space-between-align-center'
                                >
                                    <div className='euro-plan-rank-item-left flex-space-between-align-center'>
                                        <span style={{color: color,}}>{r.Paiming}</span>
                                        <img src={r.Iconurl ? r.Iconurl : userSrc} alt=''/>
                                        <span>{r.Nickname}</span>
                                    </div>
                                    <p style={{color: color,}}>{r.Total}</p>
                                </div>
                            })}
                        </div>
                    </div>}
                    {rank.length === 0 && <div
                        style={{
                            textAlign: 'center',
                            paddingTop: '200px',
                        }}
                    >
                        <img alt='' src={noDataSrc} style={{width: 102, height: 66,}}/>
                        <p style={{
                            fontSize: '14px',
                            fontWeight: 400,
                            color: '#AEAEAE',
                            lineHeight: '20px',
                        }}>
                            还没有任何人上榜
                        </p>
                    </div>}

                    {my && <div
                        style={{
                            position: 'fixed',
                            width: '100%',
                            padding: '10px 28px',
                            background: 'rgba(0, 0, 0, 0.8)',
                            bottom: 0,
                            left: 0,
                            boxSizing: 'border-box',
                        }}
                        className='flex-space-between-align-center'
                    >
                        <div className='flex-align-center'>
                            <span
                                style={{
                                    fontSize: '14px',
                                    fontWeight: '600',
                                    color: '#FFC863',
                                    lineHeight: '20px',
                                    marginRight: '24px',
                                }}
                            >{my.Paiming > 0 ? my.Paiming : '-'}</span>
                            <img src={my.Iconurl} alt='' style={{width: '28px', height: '28px', borderRadius: '50%',}}/>
                            <span
                                style={{
                                    fontSize: '14px',
                                    fontWeight: '400',
                                    color: '#FFF',
                                    lineHeight: '14px',
                                    marginLeft: '16px',
                                }}
                            >
                                {my.Nickname}
                            </span>
                        </div>
                        <p style={{
                            fontSize: '20px',
                            fontWeight: 600,
                            color: '#FFFFFF',
                            lineHeight: '20px',
                        }}>{my.Total}</p>

                    </div>}

                </GoBackLayout>
            </>
        )
    }
}

export default withRouter(EuroPlanRank)